import classNames from "classnames";
import React, { PropsWithChildren, forwardRef } from "react";
import './index.scss'
type BaseIconProps = {
	className?: string;
	style?: React.CSSProperties;
	size?: string | string[];
	spin?: boolean;
};

export type IconProps = BaseIconProps & Omit<React.SVGAttributes<SVGElement>, keyof BaseIconProps>;

export const getSize = (size: IconProps["size"]) => {
	if (Array.isArray(size) && size.length === 2) {
		return size as string[];
	}

	const width = (size as string) || "1em";
	const height = (size as string) || "1em";

	return [width, height];
};

export const Icon = forwardRef<SVGSVGElement, PropsWithChildren<IconProps>>((props, ref) => {
    const {
        style,
        className,
        spin,
        size = "2em",
        children,
        ...rest
    } = props;

    const classnames = classNames("icon" , {"icon-spin":spin}, className)

    const [width, height] = getSize(size);

    return (
        <svg
            className={classnames}
            ref={ref}
            style={style}
            width={width}
            height={height}
            fill="currentColor"
            {...rest}
        >
            {children}
        </svg>
    );
});
